<template>
  <div class="dashboard-container" >
      <h1 style="text-align: center;margin-bottom: 40px;font-size: 35px;color: #486180">订单管理</h1>

      <el-dialog title="确认收款" :visible.sync="collectionController" width="30%" @close="closeCollection('ruleForm')">
        <el-form label-width="20%" ref="ruleForm">
          <p style="text-align: center; font-size: 16px;">确认是否收款</p>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="collectionAllLive('ruleForm')">确 定</el-button>
        <el-button plain @click="closeCollection('ruleForm')">取 消</el-button>
      </span>
      </el-dialog>
      <el-dialog title="结算" :visible.sync="settlementLiveController" width="30%" @close="closeSettlement('ruleForm')">
        <el-form label-width="20%" ref="ruleForm">
          <p style="text-align: center; font-size: 16px;">确认是否结算</p>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="settlementAllLive('ruleForm')">确 定</el-button>
        <el-button plain @click="closeSettlement('ruleForm')">取 消</el-button>
      </span>
      </el-dialog>
      <el-select v-model="state" clearable placeholder="订单状态" style="margin-left: 40px;width: 200px">
        <el-option
          v-for="item in states"
          :key="item.state"
          :label="item.state"
          :value="item.state">
        </el-option>
      </el-select>
      <el-select v-model="abrogateIdentity" clearable placeholder="作废状态" style="margin-left: 40px;width: 200px">
        <el-option
          v-for="item in abrogateIdentityList"
          :key="item.abrogateIdentity"
          :label="item.abrogateIdentity"
          :value="item.abrogateIdentity">
        </el-option>
      </el-select>
      <el-input
        v-model="liveId"
        placeholder="订单ID"
        name="liveId"
        type="text"
        clearable
        style="margin-left:40px ;width: 180px"
      />
      <el-button type="primary" plain style="width:80px;margin-bottom:30px;margin-left:40px ;" @click="selectLive">查询</el-button>
      <el-button  style="width:80px;margin-bottom:30px;margin-left:40px ;" @click="checkLive">重置</el-button>
      <el-table :data="LiveList.slice((currentPage-1)*pagesize,currentPage*pagesize)" height="650px" border style="width: 100%;margin-top: 20px">
        <el-table-column align="center" fixed prop="liveId" label="订单ID"/>
        <el-table-column align="center" fixed prop="customerName" label="顾客名称"/>
        <el-table-column align="center" fixed prop="roomNumber" label="房间号"/>
        <el-table-column align="center" fixed prop="roomTypeName" label="房间类型"/>
        <el-table-column align="center" fixed prop="roomPrice" label="房间价格"/>
        <el-table-column align="center" fixed prop="liveTime" label="入住时间"/>
        <el-table-column align="center" fixed prop="cancelTime" label="退房时间"/>
        <el-table-column align="center" fixed label="房间状态" prop="state" min-width="150">
          <template v-slot="scope">
          <span :class="{
              'state-green': scope.row.state === '已退房',
              'state-red': scope.row.state === '入住中'
            }">
            {{ scope.row.state }}
          </span>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed prop="liveAmount" label="订单金额"/>
        <el-table-column align="center" fixed label="收款标识" prop="collectionIdentity" min-width="150">
          <template v-slot="scope">
          <span :class="{
              'collectionIdentity-green': scope.row.collectionIdentity === '已收款',
              'collectionIdentity-red': scope.row.collectionIdentity === '未收款'
            }">
            {{ scope.row.collectionIdentity }}
          </span>
          </template>
        </el-table-column>

        <el-table-column align="center" fixed prop="remark" label="备注"/>
        <el-table-column align="center" fixed prop="abrogateIdentity" label="作废标识"/>
        <el-table-column align="center" fixed label="操作">
          <template v-slot="scope">
            <!--  退房、作废、入住 -->
            <el-button v-if="scope.row.state === '已退房' && scope.row.collectionIdentity === '未收款' && !scope.row.liveAmount" type="text" @click="settlementLiveButton(scope.row)">结算</el-button>
            <el-button v-if="scope.row.state === '已退房' && scope.row.collectionIdentity === '未收款' && scope.row.liveAmount" type="text" @click="collectionLiveButton(scope.row)">确认收款</el-button>
          </template>
        </el-table-column>
      </el-table>

    <div style="margin-top:20px; text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[7,15,20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="LiveList.length">
      </el-pagination>
    </div>


  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {selectAllCustomer} from "@/api/Customer";
import {abrogateReserve, cancelReserve, insertReserve, selectAllReserve, updateReserve} from "@/api/reserve";
import {selectAllRoom} from "@/api/room";
import { collectionLive, selectAllLive, settlementLive } from '@/api/live'
import {selectAllStay} from "@/api/stay";


export default {
  name: 'user',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data(){
    return{
      currentPage: 1,
      currentIndex: '',
      pagesize: 7,

      abrogateIdentity:'',
      state:'',
      liveId:'',
      LiveList:[],
      abrogateIdentityList:[],
      states:[],
      collectionController:false,
      collectionList:{
        collectionIdentity:'',
      },
      settlementLiveController:false,
      settlementLiveList:{
        liveAmount:'',
        roomPrice:'',
      },
    }
  },
  mounted() {
    this.selectLive()
    this.fetchCollectionIdentity()
    this.fetchLive()

  },
  methods:{
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage= val
    },

    fetchCollectionIdentity(){
      selectAllLive().then(response => {
        this.abrogateIdentityList = Object.values(
          response.data.reduce((selectAbrogateIdentity, item) => {
            selectAbrogateIdentity[item.abrogateIdentity] = item; // 保留最后一个出现的重复项
            return selectAbrogateIdentity;
          }, {})
        );
      });
    },
    fetchLive(){
      selectAllLive().then(response => {
        this.states = Object.values(
          response.data.reduce((selectState, item) => {
            selectState[item.state] = item; // 保留最后一个出现的重复项
            return selectState;
          }, {})
        );
      });
    },
    selectLive(){
      this.currentPage = 1
      selectAllLive({
        abrogateIdentity:this.abrogateIdentity,
        state:this.state,
        liveId:this.liveId
      }).then(
        response => {
          console.log(response.data)
          this.LiveList = response.data
        }
      )
    },
    checkLive(){
      this.abrogateIdentity=''
      this.state=''
      this.liveId=''
      this.selectLive()
    },
    collectionLiveButton(row){
      this.collectionList = {
        collectionIdentity: '已收款',
        liveTableId: row.liveTableId
      }
      this.collectionController = true
    },
    settlementLiveButton(row){
      this.settlementLiveList = {
        liveAmount: row.roomPrice,
        liveTableId: row.liveTableId
      }
      this.settlementLiveController = true
    },
    collectionAllLive(formName) {
      collectionLive({
        collectionIdentity: this.collectionList.collectionIdentity,
        liveTableId: this.collectionList.liveTableId
      }).then(response => {
        this.collectionController = false;
        this.$message.success('确认收款成功');
        this.abrogateIdentity = ''
        this.state = ''
        this.liveId = ''
        this.selectLive();
      }).catch(error => {
        console.error(error);
        this.$message.error('确认收款失败');
      });
    },
    closeCollection(){
      this.collectionController = false;
    },
    settlementAllLive(formName) {
      settlementLive({
        liveAmount: this.settlementLiveList.liveAmount,
        roomPrice: this.settlementLiveList.roomPrice,
        liveTableId: this.settlementLiveList.liveTableId
      }).then(response => {
        this.settlementLiveController = false;
        this.$message.success('结算成功');
        this.selectLive();
      }).catch(error => {
        console.error(error);
        this.$message.error('结算失败');
      });
    },
    closeSettlement(){
      this.settlementLiveController = false;
    },





  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.state-green {
  color: green;
}

.state-red {
  color: red;
}
.collectionIdentity-green {
  color: green;
}

.collectionIdentity-red {
  color: red;
}
</style>
